<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>
      <el-button class="btn-add" @click="handleAddMenu()" size="mini">
        添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table
        ref="menuTable"
        style="width: 100%"
        :data="list"
        v-loading="listLoading"
        border
      >
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="菜单名称" align="center">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="菜单级数" width="100" align="center">
          <template slot-scope="scope">{{
            scope.row.level | levelFilter
          }}</template>
        </el-table-column>
        <el-table-column label="前端路径" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="前端图标" width="100" align="center">
          <template slot-scope="scope"
            ><i :class="scope.row.icon"></i
          ></template>
        </el-table-column>
        <el-table-column label="是否显示" width="100" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleHiddenChange(scope.$index, scope.row)"
              :active-value="2"
              :inactive-value="1"
              v-model="scope.row.hidden"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="设置" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="type"
              :disabled="scope.row | disableNextLevel"
              @click="handleShowNextLevel(scope.$index, scope.row)"
              >查看下级
            </el-button>
            <el-button
              size="mini"
              type="text"
              v-else
              @click="handleShowNextLevel_1(scope.$index, scope.row)"
              >查看上级
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import {fetchList,deleteMenu,updateMenu,updateHidden} from '@/api/menu'
import { getAuthMenu,editMenu,deleteMenu } from "@/api/user_list";
export default {
  name: "menuList",
  data() {
    return {
      status: "0",
      list: [],
      total: null,
      type: true,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      parentId: 0,
    };
  },
  created() {
    this.resetParentId();
    this.getList();
  },
  watch: {
    $route(route) {
      this.resetParentId();
      // this.getList();
    },
  },
  methods: {
    resetParentId() {
      console.log(this.$route.query);
      if (this.$route.query.parentId != null) {
        this.list = this.$route.query.parentId;
      } else {
        this.parentId = 0;
      }
    },
    handleAddMenu() {
      this.$router.push({
        path: "/access/menuDetail",
        query: { type: "1" },  //0修改  1添加
      });
    },
    async getList(type) {
      this.list=[]
      this.listLoading = true;
      await getAuthMenu().then((response) => {
        this.listLoading = false;
        response.data.data.forEach((item) => {
            console.log('hh')
            // this.list=[]
          if (this.status == "0") {
          
            if (item.level== 0) {
              this.list.push(item);
            }
          }else{
            if (item.children.length =0) {
              this.list.push(item);
            }
          }
        });

        console.log(this.list);
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleHiddenChange(index, row) {
      editMenu(row).then((response) => {
        console.log(response)
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleShowNextLevel_1() {
          this.status=0
      
      this.getList();
      this.type = true;
      this.$router.push({
        path: "/access/menu_set",
       
      });
  
    },
    handleShowNextLevel(index, row) {
      this.type = false;
      this.status=1
      this.$router.push({
        path: "/access/menu_set",
        query: { parentId: row.children },
      });
    },
    handleUpdate(index, row) {
      //修改菜单
      this.$router.push({
        path: "/access/menuDetail",
        query: { id: JSON.stringify(row),type: "0" },  //0修改
      });
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除该菜单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(row)
        deleteMenu(row.id).then((response) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
          this.handleShowNextLevel_1();
        });
      });
    },
  },
  filters: {
    levelFilter(value) {
      if (value === 0) {
        return "一级";
      } else {
        return "二级";
      }
    },
    disableNextLevel(value) {
      console.log(value);
      if (value.children.length > 0) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped></style>
